 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{  
           padding:0;  
           margin:0;  
       } 
       @media (min-width:800px) {
  	.navMenu {
    min-width: 500px;
    max-width: 800px;
    min-height: 500px;
    margin: 0 auto;
  } 
       /*一级菜单*/  
       .navMenu {  
           width:570px;  
           margin:0 auto;  
       }  
       .navMenu ul li{  
           float: left;  
           position: relative;  
       }  
       @media (max-width:799px){

  .navMenu > ul > li{
    display:block;
  }

  .container>navMenu>ul{
    padding-left:10px;
    display:none;
  }

  .container>navMenu>ul>li {
    list-style: none;
    position: relative;
  }

  .container>nav>ul.open {
     display:block;
  }

}
       li{  
           list-style: none;  
           background-color: #eee;  
           width: 140px;  
           height: 40px;  
           text-align: center;  
           margin-right: 2px;  
           margin-bottom: 2px;  
       }  
       ul li a{  
           line-height: 40px;  
           text-align: center;  
           font-size: 20px;  
           color: #000;  
           text-decoration: none;  
           display: block;  
           padding:0 10px;  
       }  
       /*二级菜单*/  
       .navMenu ul li ul {  
           display: none;  
           position:absolute;  
           left: 0;  
           top:0;  
           margin-top:42px;  
       }  
       .navMenu ul li ul li{  
           float:none;  
       }  
       /*三级菜单*/  
       .navMenu ul li ul li ul{  
           display: none;  
           left:140px;  
           top:-42px;  
       }  


	</style>
	<body>  
<div class="navMenu">  
    <ul>  
        <li><a href="#">首页</a>  
            <ul>  
                <li><a href="#">JavaScript+</a>  
                    <ul>  
                        <li><a href="#">三角函数</a></li>  
                        <li><a href="#">矩形</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">语文</a>  
                    <ul>  
                        <li><a href="#">唐诗</a></li>  
                        <li><a href="#">宋词</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">英语</a></li>  
            </ul>  
        </li>  
        <li><a href="#">课程大厅</a></li>  
        <li><a href="#">学习中心+</a>  
            <ul>  
                <li><a href="#">JavaScript+</a>  
                    <ul>  
                        <li><a href="#">三角函数</a></li>  
                        <li><a href="#">矩形</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">语文</a>  
                    <ul>  
                        <li><a href="#">三角函数</a></li>  
                        <li><a href="#">矩形</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">英语</a></li>  
            </ul>  
        </li>  
        <li><a href="#">帮助</a></li>  
    </ul>  
</div>
<script type="text/javascript">  
    function addLoadEvent(func){          //func为将要绑定到window.onload上的函数；  
        var oldonload=window.onload;    //可能已经绑定了一些函数  
        if(typeof window.onload!='function'){  //如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它  
            window.onload=func();  
        }  
        else{                                   //如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现在指令的末尾  
            window.onload=function(){  
                oldonload();  
                func();  
            }  
        }  
    }  
    function Hover(){  
            var Lis=document.getElementsByTagName("li");  
            for(var i= 0,len=Lis.length; i<len; i++){  
                Lis[i].onmouseover=function(){  
                    var secondUl=this.getElementsByTagName("ul")[0];  
                    if(secondUl!=undefined){  
                        secondUl.style.display="block";  
                    }  
                    this.style.backgroundColor="#0066FF";  
                }  
                Lis[i].onmouseout=function(){  
                    var secondUl=this.getElementsByTagName("ul")[0];  
                    if(secondUl!=undefined){  
                        secondUl.style.display="none";  
                    }  
                    this.style.backgroundColor="#eee";  
                }  
            }  
    }  
    addLoadEvent(Hover);  
</script>  
</body>  


</html>
 